<template>
  <div class="road_book_map">
    <el-alert title="vue-baidu-map的集成还是有些问题，地图开发建议跟着官方走" type="warning" style="marginBottom: 20px" />
    <baidu-map
      class="map"
      center="中国"
      ak="ydQSqxFvhi32yEHGTo8rEqxpvfBMvE85"
      :scroll-wheel-zoom="true"
    >
      <bm-driving
        start="天环广场"
        end="太古汇"
        @searchcomplete="handleSearchComplete"
        :panel="false"
        autoViewport
      ></bm-driving>
      <!-- speed = 速度，单位米每秒 -->
      <bml-lushu
        @stop="reset"
        :path="path"
        :icon="icon"
        :play="play"
        :rotation="true"
        :speed="30" 
      ></bml-lushu>
    </baidu-map>
  </div>
</template>

<script>
import { BaiduMap, BmDriving, BmlLushu } from "vue-baidu-map-3x";
import { reactive, toRefs } from 'vue';
export default {
  components: {
    BaiduMap,
    BmDriving,
    BmlLushu,
  },
  setup(){
    const data = reactive({
      play: true,
      path: [],
      icon: {
        url: "http://api.map.baidu.com/library/LuShu/1.2/examples/car.png",
        size: { width: 52, height: 26 },
        opts: { anchor: { width: 27, height: 13 } },
      },
    })

        // 车到终点了
    function reset() {
      data.play = false;
    }
    // 选择起点
    function handleSearchComplete(e) {
      console.log(e);
      data.path = e.getPlan(0).getRoute(0).getPath();
    }

    return {
      ...toRefs(data),
      reset,
      handleSearchComplete
    }
  }
};
</script>

<style lang="scss" scoped>
.road_book_map {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.map {
  width: 100%;
  height: 100%;
}
</style>